import { Shape, ObjectExt } from '@antv/x6'

export class CustomNode extends Shape.Rect {
}
CustomNode.config({
  markup: [
    {
      tagName: 'rect',
      selector: 'body'
    },
    {
      tagName: 'text',
      selector: 'label'
    }
  ],
  attrs: {
    body: {
      ref: 'label',
      refWidth: 20,
      refHeight: 20,
      refX: -10,
      refY: -10,
      fill: '#FFFFFF',
      stroke: '#5F95FF',
      strokeWidth: 1
    },
    label: {
      fontSize: 12,
      fill: '#333333'
    }
  },
  ports: {
    groups: {
      top: {
        position: 'top',
        attrs: {
          circle: {
            r: 10,
            magnet: true,
            stroke: '#5F95FF',
            strokeWidth: 1,
            fill: '#fff',
            style: {
              visibility: 'hidden'
            }
          }
        },

      },
      right: {
        position: 'right',
        attrs: {
          circle: {
            r: 10,
            magnet: true,
            stroke: '#5F95FF',
            strokeWidth: 1,
            fill: '#fff',
            style: {
              visibility: 'hidden'
            }
          }
        }
      },
      bottom: {
        position: 'bottom',
        attrs: {
          circle: {
            r: 10,
            magnet: true,
            stroke: '#5F95FF',
            strokeWidth: 1,
            fill: '#fff',
            style: {
              visibility: 'hidden'
            }
          }
        }
      },
      left: {
        position: 'left',
        attrs: {
          circle: {
            r: 10,
            magnet: true,
            stroke: '#5F95FF',
            strokeWidth: 1,
            fill: '#fff',
            style: {
              visibility: 'hidden'
            }
          }
        }
      }
    },
    items: [
      {
        group: 'top',
        args: {
          // dx: -7,
        },
      },
      {
        group: 'right',
        args: {
          // dy: -14,
        },
      },
      {
        group: 'bottom',
        args: {
          // dy: -14,
        },
      },
      {
        group: 'left',
        args: {
          // dy: -7,
        },
      }
    ]
  },
  // 通过钩子将自定义选项 label 应用到 'attrs/text/text' 属性上
  propHooks(metadata) {
    const { label, ...others } = metadata
    if (label) {
      ObjectExt.setByPath(others, 'attrs/text/text', label)
    }
    return others
  }
})

export class CustomGroup extends Shape.Rect {

}
CustomGroup.config({
  width: 100,
  height: 40,
  markup: [
    {
      tagName: 'rect',
      selector: 'body'
    },
    {
      tagName: 'text',
      selector: 'label'
    }
  ],
  attrs: {
    body: {
      fill: '#FFFFFF',
      stroke: '#5F95FF',
      strokeWidth: 1
    },
    label: {
      fontSize: 12,
      fill: '#333333',
      refY: 20
    }
  },
  ports: {
    groups: {
      top: {
        position: 'top',
        attrs: {
          circle: {
            r: 10,
            magnet: true,
            stroke: '#5F95FF',
            strokeWidth: 1,
            fill: '#fff',
            style: {
              visibility: 'hidden'
            }
          }
        }
      },
      right: {
        position: 'right',
        attrs: {
          circle: {
            r: 10,
            magnet: true,
            stroke: '#5F95FF',
            strokeWidth: 1,
            fill: '#fff',
            style: {
              visibility: 'hidden'
            }
          }
        }
      },
      bottom: {
        position: 'bottom',
        attrs: {
          circle: {
            r: 10,
            magnet: true,
            stroke: '#5F95FF',
            strokeWidth: 1,
            fill: '#fff',
            style: {
              visibility: 'hidden'
            }
          }
        }
      },
      left: {
        position: 'left',
        attrs: {
          circle: {
            r: 10,
            magnet: true,
            stroke: '#5F95FF',
            strokeWidth: 1,
            fill: '#fff',
            style: {
              visibility: 'hidden'
            }
          }
        }
      }
    },
    items: [
      {
        group: 'top'
      },
      {
        group: 'right'
      },
      {
        group: 'bottom'
      },
      {
        group: 'left'
      }
    ]
  },
  // 通过钩子将自定义选项 label 应用到 'attrs/text/text' 属性上
  propHooks(metadata) {
    const { label, ...others } = metadata
    if (label) {
      ObjectExt.setByPath(others, 'attrs/text/text', label)
    }
    return others
  }
})

export class NodeGroupAngle {
  constructor(x, y, x2, y2) {
    this.x = x || null
    this.y = y || null
    this.x2 = x2 || null
    this.y2 = y2 || null

    this.top = 40
    this.buttom = 20
    this.left = 20
    this.right = 20
  }

  update(x, y, x2, y2) {
    if (this.x === null || this.x > x) {
      this.x = x
    }

    if (this.y === null || this.y > y) {
      this.y = y
    }

    if (this.x2 === null || this.x2 < x2) {
      this.x2 = x2
    }

    if (this.y2 === null || this.y2 < y2) {
      this.y2 = y2
    }
  }

  getSize() {
    return {
      width: this.x2 - this.x + this.left + this.right,
      height: this.y2 - this.y + this.top + this.buttom
    }
  }

  getPosition() {
    return {
      x: this.x - this.left,
      y: this.y - this.top
    }
  }
}
